<template>
  <div>
    <!-- ======== loading ============ -->
    <van-loading
      style="margin: 2.5rem 0rem"
      class="loading"
      v-if="listLoading"
      type="spinner"
      :vertical="true"
    />
    <van-list
      v-if="goodsList.length"
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的~"
      @load="onLoadgoods"
      :immediate-check="false"
    >
      <div
        class="sh_goods"
        v-for="(item, index) in goodsList"
        :key="index"
        @click="toGoodsPage(item)"
      >
        <div class="sh_goods_i">
          <img v-lazy="item.proLogo" v-errorImg:goods />
        </div>
        <div class="sh_goods_r">
          <div class="t">{{ item.proTitle }}</div>
          <div class="b">
            <span>￥</span>
            {{ item.proPrice }}
          </div>
        </div>
      </div>
    </van-list>
    <!-- ======== 商品缺省图 ============= -->
    <div class="no_data" v-if="goodsList.length== 0 && !listLoading">
      <img src="@/assets/one/zw.png" alt />
      <div class="zw">暂时没有找到您想要的商品~</div>
    </div>
    <!-- <div class="theend" v-if="goodsList.length && countgo && !listLoading">我是有底线的~</div> -->
    <!-- vip权限 -->
    <noPower v-if="hasRoot && !listLoading" :isRank="true"/>
  </div>
</template>
<script>
import errorImg from '@/assets/img/shop.png'; //图片

export default {
  data() {
    return {
      keytext: this.$route.query.name, // 搜索关键词
      listLoading: false, //列表搜索loading
      loading: false,
      goodsList: [], //商品列表
      countgo: false, // 商品是否触底
      pagego: 1, // 商品当前页数
      pageSize: 10, // 商品当前页数
      finished: false, // 触底
      hasRoot: false,
      errorImg: errorImg
    };
  },
  props: ['valueSerach'],
  watch: {
    valueSerach(valueSerach) {
      if (valueSerach == '') {
        // 传空值时会代入空字符，不传时接口也不代入
        this.pagego = 1;
        this.keytext = '';
        this.hasRoot = false;
        this.goodsList = [];
        this.finished = false;
        this.getgoodss();
      }
    }
  },
  created() {
    this.keytext = this.valueSerach;
    this.getgoodss();
  },
  methods: {
    search(i) {
      this.keytext = i;
      this.pagego = 1;
      this.goodsList = [];
      this.hasRoot = false;
      this.finished = false;
      this.getgoodss();
    },
    search1(i) {
      this.keytext = i;
    },
    // 商品搜索数据
    getgoodss() {
      // this.$router.push({ path: '/searchHistory', query: { name: this.keytext } });
      this.listLoading = (this.pagego == 1);
      this.loading = true;
      this.$axios
        .post('/api/product/search', {
          associatedVideoRange: -1,
          categoryId: '0',
          categoryIds: [],
          commissionRateRange: -1,
          coupon: 0,
          firstcategoryId: 0,
          isDiscover: 0,
          key: this.keytext, // 搜索文案
          pageIndex: this.pagego, // 当前 页数
          pageSize: this.pageSize, // 页 容量
          priceRange: -1,
          sort: 1,
          source: -1,
          viewRange: -1,
          volumeRange: -1
        })
        .then(res => {
          this.listLoading = false;
          this.loading = false;
          if (res.data.code == 0) {
            this.goodsList = this.goodsList.concat(res.data.data);
            if (res.data.count == this.goodsList.length) {
              this.countgo = true;
            }
            if(res.data.data.length < this.pageSize){
              this.loading = false;
              this.finished = true;
            }
          } else if (res.data.code == 1003 || res.data.code == 1013) {
            this.hasRoot = true; //无权限
            this.loading = false;
            // this.finished = true;
          }
        });
    },
    // 商品 触底
    onLoadgoods() {
      if (this.pagego * 10 > this.goodsList.length) {
        this.listLoading = false;
        this.loading = false;
        this.finished = false;
      } else if (this.goodsList.length) {
        this.pagego = this.pagego + 1;
        this.getgoodss();
        this.listLoading = false;
      }
    },
    // 跳转商品详情
    toGoodsPage(item) {
      this.$router.push({
        path: '/goodsDetailsMain',
        query: {
          id: item.proId
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.sh_goods {
  width: 100%;
  height: 1.72rem;
  margin-top: 0.266667rem;
  background-color: #fff;
  border-radius: 0.133333rem;
  display: flex;
  align-items: center;
  padding-left: 0.266667rem;
  box-sizing: border-box;
  .sh_goods_i {
    width: 1.173333rem;
    height: 1.173333rem;
    border-radius: 0.266667rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.266667rem;
    }
  }
  .sh_goods_r {
    margin-left: 0.266667rem;
    .t {
      width: 6.666667rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.4rem;
      color: #222222;
    }
    .b {
      margin-top: 0.053333rem;
      font-size: 0.426667rem;
      color: #fd7f2c;
      font-family: Dinpro-medium;
      span {
        font-size: 0.346667rem;
      }
    }
  }
}
.no_data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 2.666667rem;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
.theend {
  font-size: 0.32rem;
  text-align: center;
  color: #888;
  padding-top: 0.8rem;
  span {
    color: #fd7f2c;
  }
}
</style>
